$(function () {
  //柱状图
  carousel('caro1', 'slide', 3000);
  initBar();
  initLine();
  initPie();
  initChina();
  $('.map-change ul li').click(function () {
    const index = $(this).index();
    $(this).addClass('active').siblings().removeClass('active');
    if (index === 1) {
      initMap();
    } else {
      initChina();
    }
  })
  $('#vticker').vTicker({
    speed: 1000,     //滚动速度，单位毫秒。
    pause: 3000,        //暂停时间，就是滚动一条之后停留的时间，单位毫秒。
    showItems: 1,      //显示内容的条数。
    animation: 'fade',  //动画效果，默认是fade，淡出。
    mousePause: true,
    height: 250,
    direction: 'up',     //滚动的方向，默认为up向上，down则为向下滚动。
  });
})
function initBar() {
  const data = [220, 182, 191, 234, 290, 330]
  const sideData = data.map(item => item + 4)
  let chart1 = echarts.init(document.getElementById('bar'));
  let option = {
    grid: {
      bottom: 25,
      top: 25
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#010521',
      formatter: "{b} : {c}",
      textStyle: {
        color: '#fff'
      },
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    xAxis: {
      data: ['2016', '2017', '2018', '2019', '2020', '2021'],
      //坐标轴
      axisLine: {
        lineStyle: {
          color: '#3eb2e8'
        }
      },
      //坐标值标注
      axisLabel: {
        show: true,
        textStyle: {
          color: '#fff',
        }
      }
    },
    yAxis: {
      //坐标轴
      axisLine: {
        show: false
      },
      //坐标值标注
      axisLabel: {
        show: true,
        textStyle: {
          color: '#fff',
        }
      },
      //分格线
      splitLine: {
        lineStyle: {
          color: '#4784e8'
        }
      }
    },
    series: [
      {
        name: 'a',
        tooltip: {
          show: false
        },
        type: 'bar',
        barWidth: 18,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: "transparent" // 0% 处的颜色
            }, {
              offset: 0.6,
              color: "#019fda" // 60% 处的颜色
            }, {
              offset: 1,
              color: "#00fcff" // 100% 处的颜色
            }], false)
          }
        },
        data: data,
        barGap: 0
      },
      {
        type: 'bar',
        barWidth: 8,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: "rgba(0,252,255,0)" // 0% 处的颜色
            }, {
              offset: 0.6,
              color: "rgba(0,252,255,.4)" // 60% 处的颜色
            }, {
              offset: 1,
              color: "#01afe0" // 100% 处的颜色
            }], false)
          }
        },
        barGap: 0,
        data: sideData
      },
      {
        name: 'b',
        tooltip: {
          show: false
        },
        type: 'pictorialBar',
        itemStyle: {
          borderWidth: 1,
          borderColor: '#00fcff',
          color: '#00fcff'
        },
        symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
        symbolSize: ['27', '11'],
        symbolOffset: ['0', '-7'],
        symbolRotate: -5,
        symbolPosition: 'end',
        data: data,
        z: 3
      }]
  };
  chart1.setOption(option)
}

function initLine() {
  const data = [220, 182, 191, 234, 290, 330, 220, 182, 191, 234, 290, 330]
  let chart1 = echarts.init(document.getElementById('line'));
  let option = {
    grid: {
      bottom: '10%',
      top: '10%'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
      }
    },
    xAxis: {
      boundaryGap: false,
      data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
      //坐标轴
      axisLine: {
        lineStyle: {
          color: '#3eb2e8'
        }
      },
      //坐标值标注
      axisLabel: {
        show: true,
        textStyle: {
          color: '#fff',
        }
      }
    },
    yAxis: {
      //坐标轴
      axisLine: {
        show: false
      },
      //坐标值标注
      axisLabel: {
        show: true,
        textStyle: {
          color: '#fff',
        }
      },
      //分格线
      splitLine: {
        lineStyle: {
          color: '#4784e8'
        }
      }
    },
    series: [
      {
        data: data,
        type: 'line',
        smooth: true,
        itemStyle: {
          color: '#00e4f9'
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: "transparent" // 0% 处的颜色
            }, {
              offset: 1,
              color: "#0252c2" // 100% 处的颜色
            }], false)
          }
        }
      }
    ],
  };
  chart1.setOption(option)
}

function initPie() {
  let chart1 = echarts.init(document.getElementById('pie'));
  let option = {
    series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: [30, 90],
        center: ['50%', '50%'],
        label: {
          fontSize: 15,
          color: '#fff',
          formatter: (params) => {
            return `${params.name}\n {a|${params.percent}%}`
          },
          rich: {
            a: {
              color: '#01cfed',
              fontSize: 16,
              lineHeight: 20
            },
          }
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: "#041b98" // 0% 处的颜色
            }, {
              offset: 1,
              color: "#27b8f9" // 100% 处的颜色
            }], false)
          }
        },
        data: [
          { value: 40, name: '截止阀球阀' },
          { value: 38, name: '异性管件接头件' },
          { value: 32, name: '过滤器过滤网' },
          { value: 30, name: '黄铜热锻精加工件' },
        ]
      }
    ]
  };
  chart1.setOption(option)
}

function initChina() {
  //地图展示
  var myChart = echarts.init(document.getElementById('map'));
  var convertData = function (geoCoordMap, data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var geoCoord = geoCoordMap[data[i].name];
      if (geoCoord) {
        res.push({
          name: data[i].name,
          value: geoCoord.concat(data[i].value)
        });
      }
    }
    return res;
  };
  var dianData1 = {
    '瑞达': [118.797526, 29.455843],
  }
  var locData1 = [
    { name: "瑞达", value: "10" },
  ]
  var dianData2 = {
    '河北': [114.512735, 38.041836],
    '湖南': [113.03301, 28.150378],
    '武汉': [114.295838, 30.600353],
  }
  var locData2 = [
    { name: "河北", value: "6" },
    { name: "湖南", value: "4" },
    { name: "武汉", value: "3" }
  ]
  let option = {
    tooltip: {
      show: false,
      triggerOn: 'click',
    },
    // 图表主标题
    title: {},
    // 视觉映射组件
    geo: {
      map: 'china',
      top: 50,
      left: 'center',
      aspectScale: 1,
      zoom: 1,
      roam: false,
      itemStyle: {
        borderWidth: 0,
        borderColor: '#024f6a',
        areaColor: '#024f6a',
        shadowColor: '#024f6a',
        shadowBlur: 10
      },
      emphasis: {
        itemStyle: {
          borderWidth: 0,
          borderColor: '#024f6a',
          areaColor: '#024f6a',
          shadowColor: '#024f6a',
          shadowBlur: 10
        },
        label: {
          show: false
        }
      },
      tooltip: {
        show: false,
        triggerOn: 'click',
      },
      label: {
        show: false,
        color: '#cbe4ff',
      }
    },
    series: [
      {
        name: '',
        top: 50,
        type: 'map',
        aspectScale: 1,
        left: 'center',
        zoom: 1,
        tooltip: {
          show: false,
          triggerOn: 'none'
        },
        map: 'china',
        roam: false,
        itemStyle: {
          areaColor: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 1, color: '#004865' // 0% 处的颜色
            }, {
              offset: 0, color: '#008bd0' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },
          borderWidth: 1, // 描边线宽 为 0 时无描边
          borderColor: '#00a1d3', // 图形的描边颜色 支持的颜色格式同 color，不支持回调函数
          borderType: 'solid', // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'
          emphasis: {
            label: {
              show: true,
              color: '#fff'
            },
            areaColor: '#008bd0'
          }
        },
        label: {
          show: false,
          color: '#fff'
        },
      },
      {
        name: '工厂点位',
        type: 'effectScatter',
        coordinateSystem: 'geo',
        data: convertData(dianData1, locData1),
        symbolSize: function (val) {
          return val[2] / 2;
        },
        z: 9,
        tooltip: {
          show: false
        },
        itemStyle: {
          color: '#e73459',
          shadowBlur: 10,
          shadowColor: '#fdf5f7'
        },
      },
      {
        name: '海外工厂',
        z: 9,
        type: 'effectScatter',
        coordinateSystem: 'geo',
        data: convertData(dianData2, locData2),
        symbolSize: function (val) {
          return val[2] / 2;
        },
        itemStyle: {
          color: '#00e8ff',
          shadowBlur: 5,
          shadowColor: '#fdf5f7'
        },
      },
      {
        type: 'lines',
        lineStyle: {
          normal: {
            color: '#4275cf',
            width: 2, //线条宽度
            opacity: 1, //尾迹线条透明度
            curveness: .2 //尾迹线条曲直度
          },
          emphasis: {
            width: 3,
            opacity: 1,
          }
        },
        z: 8,
        tooltip: {
          show: false
        },
        animation: false,
        data: [
          {
            "fromName": "瑞达",
            "toName": "河北",
            "coords": [
              [118.797526, 29.455843],
              [114.512735, 38.041836],
            ],
          },
          {
            "fromName": "瑞达",
            "toName": "湖南",
            "coords": [
              [118.797526, 29.455843],
              [113.03301, 28.150378],
            ],
          },
          {
            "fromName": "瑞达",
            "toName": "武汉",
            "coords": [
              [118.797526, 29.455843],
              [114.295838, 30.600353],
            ],
          }
        ]
      },
    ]
  };
  myChart.setOption(option);
}
function initMap() {
  //地图展示
  var myChart = echarts.init(document.getElementById('map'));
  let nameMap = {
    "Afghanistan": "阿富汗",
    "Angola": "安哥拉",
    "Albania": "阿尔巴尼亚",
    "Algeria": "阿尔及利亚",
    "Argentina": "阿根廷",
    "Armenia": "亚美尼亚",
    "Australia": "澳大利亚",
    "Austria": "奥地利",
    "Azerbaijan": "阿塞拜疆",
    "Bahamas": "巴哈马",
    "Bangladesh": "孟加拉国",
    "Belgium": "比利时",
    "Benin": "贝宁",
    "Burkina Faso": "布基纳法索",
    "Burundi": "布隆迪",
    "Bulgaria": "保加利亚",
    "Bosnia and Herz.": "波斯尼亚和黑塞哥维那",
    "Belarus": "白俄罗斯",
    "Belize": "伯利兹",
    "Bermuda": "百慕大群岛",
    "Bolivia": "玻利维亚",
    "Brazil": "巴西",
    "Brunei": "文莱",
    "Bhutan": "不丹",
    "Botswana": "博茨瓦纳",
    "Cambodia": "柬埔寨",
    "Cameroon": "喀麦隆",
    "Canada": "加拿大",
    "Central African Rep.": "中非共和国",
    "Chad": "乍得",
    "Chile": "智利",
    "China": "中国",
    "Colombia": "哥伦比亚",
    "Congo": "刚果",
    "Costa Rica": "哥斯达黎加",
    "Côte d'Ivoire": "科特迪瓦",
    "Croatia": "克罗地亚",
    "Cuba": "古巴",
    "Cyprus": "塞浦路斯",
    "Czech Rep.": "捷克共和国",
    "Dem. Rep. Korea": "韩国",
    "Dem. Rep. Congo": "民主刚果",
    "Denmark": "丹麦",
    "Djibouti": "吉布提",
    "Dominican Rep.": "多米尼加共和国",
    "Ecuador": "厄瓜多尔",
    "Egypt": "埃及",
    "El Salvador": "萨尔瓦多",
    "Eq. Guinea": "赤道几内亚",
    "Eritrea": "厄立特里亚",
    "Estonia": "爱沙尼亚",
    "Ethiopia": "埃塞俄比亚",
    "Falkland Is.": "福克兰群岛",
    "Fiji": "斐济",
    "Finland": "芬兰",
    "France": "法国",
    "French Guiana": "法属圭亚那",
    "Fr. S. Antarctic Lands": "法属南部领地",
    "Gabon": "加蓬",
    "Gambia": "冈比亚",
    "Germany": "德国",
    "Georgia": "佐治亚州",
    "Ghana": "加纳",
    "Greece": "希腊",
    "Greenland": "格陵兰",
    "Guatemala": "危地马拉",
    "Guinea": "几内亚",
    "Guinea-Bissau": "几内亚比绍",
    "Guyana": "圭亚那",
    "Haiti": "海地",
    "Heard I. and McDonald Is.": "赫德岛和麦克唐纳群岛",
    "Honduras": "洪都拉斯",
    "Hungary": "匈牙利",
    "Iceland": "冰岛",
    "India": "印度",
    "Indonesia": "印度尼西亚",
    "Iran": "伊朗",
    "Iraq": "伊拉克",
    "Ireland": "爱尔兰",
    "Israel": "以色列",
    "Italy": "意大利",
    "Ivory Coast": "象牙海岸",
    "Jamaica": "牙买加",
    "Japan": "日本",
    "Jordan": "乔丹",
    "Kashmir": "克什米尔",
    "Kazakhstan": "哈萨克斯坦",
    "Kenya": "肯尼亚",
    "Kosovo": "科索沃",
    "Kuwait": "科威特",
    "Kyrgyzstan": "吉尔吉斯斯坦",
    "Laos": "老挝",
    "Lao PDR": "老挝人民民主共和国",
    "Latvia": "拉脱维亚",
    "Lebanon": "黎巴嫩",
    "Lesotho": "莱索托",
    "Liberia": "利比里亚",
    "Libya": "利比亚",
    "Lithuania": "立陶宛",
    "Luxembourg": "卢森堡",
    "Madagascar": "马达加斯加",
    "Macedonia": "马其顿",
    "Malawi": "马拉维",
    "Malaysia": "马来西亚",
    "Mali": "马里",
    "Mauritania": "毛里塔尼亚",
    "Mexico": "墨西哥",
    "Moldova": "摩尔多瓦",
    "Mongolia": "蒙古",
    "Montenegro": "黑山",
    "Morocco": "摩洛哥",
    "Mozambique": "莫桑比克",
    "Myanmar": "缅甸",
    "Namibia": "纳米比亚",
    "Netherlands": "荷兰",
    "New Caledonia": "新喀里多尼亚",
    "New Zealand": "新西兰",
    "Nepal": "尼泊尔",
    "Nicaragua": "尼加拉瓜",
    "Niger": "尼日尔",
    "Nigeria": "尼日利亚",
    "Korea": "朝鲜",
    "Northern Cyprus": "北塞浦路斯",
    "Norway": "挪威",
    "Oman": "阿曼",
    "Pakistan": "巴基斯坦",
    "Panama": "巴拿马",
    "Papua New Guinea": "巴布亚新几内亚",
    "Paraguay": "巴拉圭",
    "Peru": "秘鲁",
    "Republic of the Congo": "刚果共和国",
    "Philippines": "菲律宾",
    "Poland": "波兰",
    "Portugal": "葡萄牙",
    "Puerto Rico": "波多黎各",
    "Qatar": "卡塔尔",
    "Republic of Seychelles": "塞舌尔共和国",
    "Romania": "罗马尼亚",
    "Russia": "俄罗斯",
    "Rwanda": "卢旺达",
    "Samoa": "萨摩亚",
    "Saudi Arabia": "沙特阿拉伯",
    "Senegal": "塞内加尔",
    "Serbia": "塞尔维亚",
    "Sierra Leone": "塞拉利昂",
    "Slovakia": "斯洛伐克",
    "Slovenia": "斯洛文尼亚",
    "Solomon Is.": "所罗门群岛",
    "Somaliland": "索马里兰",
    "Somalia": "索马里",
    "South Africa": "南非",
    "S. Geo. and S. Sandw. Is.": "南乔治亚和南桑德威奇群岛",
    "S. Sudan": "南苏丹",
    "Spain": "西班牙",
    "Sri Lanka": "斯里兰卡",
    "Sudan": "苏丹",
    "Suriname": "苏里南",
    "Swaziland": "斯威士兰",
    "Sweden": "瑞典",
    "Switzerland": "瑞士",
    "Syria": "叙利亚",
    "Tajikistan": "塔吉克斯坦",
    "Tanzania": "坦桑尼亚",
    "Thailand": "泰国",
    "The Kingdom of Tonga": "汤加王国",
    "Timor-Leste": "东帝汶",
    "Togo": "多哥",
    "Trinidad and Tobago": "特立尼达和多巴哥",
    "Tunisia": "突尼斯",
    "Turkey": "土耳其",
    "Turkmenistan": "土库曼斯坦",
    "Uganda": "乌干达",
    "Ukraine": "乌克兰",
    "United Arab Emirates": "阿拉伯联合酋长国",
    "United Kingdom": "大不列颠联合王国",
    "United Republic of Tanzania": "坦桑尼亚联合共和国",
    "United States": "美国",
    "United States of America": "美利坚合众国",
    "Uruguay": "乌拉圭",
    "Uzbekistan": "乌兹别克斯坦",
    "Vanuatu": "瓦努阿图",
    "Venezuela": "委内瑞拉",
    "Vietnam": "越南",
    "West Bank": "西岸",
    "W. Sahara": "西撒哈拉",
    "Yemen": "也门",
    "Zambia": "赞比亚",
    "Zimbabwe": "津巴布韦"
  };
  var convertData = function (geoCoordMap, data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var geoCoord = geoCoordMap[data[i].name];
      if (geoCoord) {
        res.push({
          name: data[i].name,
          value: geoCoord.concat(data[i].value)
        });
      }
    }
    return res;
  };
  var dianData1 = {
    '瑞达': [118.797526, 29.455843],
  }
  var locData1 = [
    { name: "瑞达", value: "10" },
  ]
  var dianData2 = {
    '法国': [2.352787, 48.826256],
    '俄罗斯': [106.242933, 62.740808],
    '埃及': [28.532751, 26.044812],
    '沙特阿拉伯': [42.937834, 25.728604],
    '韩国': [128.006935, 36.526346]
  }
  var locData2 = [
    { name: "法国", value: "7" },
    { name: "俄罗斯", value: "7" },
    { name: "埃及", value: "7" },
    { name: "沙特阿拉伯", value: "7" },
    { name: "韩国", value: "7" },
  ]
  let option = {
    tooltip: {
      show: false,
      triggerOn: 'click',
    },
    // 图表主标题
    title: {},
    // 视觉映射组件
    geo: {
      map: 'world',
      top: 50,
      aspectScale: 0.75,
      zoom: 1,
      roam: false,
      itemStyle: {
        borderWidth: 0,
        borderColor: '#024f6a',
        areaColor: '#024f6a',
        shadowColor: '#024f6a',
        shadowBlur: 10
      },
      emphasis: {
        itemStyle: {
          borderWidth: 0,
          borderColor: '#024f6a',
          areaColor: '#024f6a',
          shadowColor: '#024f6a',
          shadowBlur: 10
        },
        label: {
          show: false
        }
      },
      tooltip: {
        show: false,
        triggerOn: 'click',
      },
      label: {
        show: false,
        color: '#cbe4ff',
      }
    },
    series: [
      {
        name: '',
        top: 50,
        type: 'map',
        aspectScale: 0.75,
        zoom: 1,
        tooltip: {
          show: false,
          triggerOn: 'none'
        },
        map: 'world',
        roam: false,
        itemStyle: {
          areaColor: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 1, color: '#004865' // 0% 处的颜色
            }, {
              offset: 0, color: '#008bd0' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },
          borderWidth: 1, // 描边线宽 为 0 时无描边
          borderColor: '#00a1d3', // 图形的描边颜色 支持的颜色格式同 color，不支持回调函数
          borderType: 'solid', // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'
          emphasis: {
            label: {
              show: true,
              color: '#fff'
            },
            areaColor: '#008bd0'
          }
        },
        label: {
          show: false,
          color: '#fff'
        },
        nameMap: nameMap
      },
      {
        name: '工厂点位',
        type: 'effectScatter',
        coordinateSystem: 'geo',
        data: convertData(dianData1, locData1),
        symbolSize: function (val) {
          return val[2] / 2;
        },
        z: 9,
        tooltip: {
          show: false
        },
        itemStyle: {
          color: '#e73459',
          shadowBlur: 10,
          shadowColor: '#fdf5f7'
        },
      },
      {
        name: '海外工厂',
        z: 9,
        type: 'effectScatter',
        coordinateSystem: 'geo',
        data: convertData(dianData2, locData2),
        symbolSize: function (val) {
          return val[2] / 2;
        },
        itemStyle: {
          color: '#00e8ff',
          shadowBlur: 5,
          shadowColor: '#fdf5f7'
        },
      },
      {
        type: 'lines',
        lineStyle: {
          normal: {
            color: '#00eaff',
            width: 2, //线条宽度
            opacity: 1, //尾迹线条透明度
            curveness: .2 //尾迹线条曲直度
          },
          emphasis: {
            width: 3,
            opacity: 1,
          }
        },
        z: 8,
        tooltip: {
          show: false
        },
        animation: false,
        data: [
          {
            "fromName": "瑞达",
            "toName": "法国",
            "coords": [
              [118.797526, 29.455843],
              [2.352787, 48.826256],
            ],
          },
          {
            "fromName": "瑞达",
            "toName": "俄罗斯",
            "coords": [
              [118.797526, 29.455843],
              [106.242933, 62.740808],
            ],
          },
          {
            "fromName": "瑞达",
            "toName": "埃及",
            "coords": [
              [118.797526, 29.455843],
              [28.532751, 26.044812],
            ],
          },
          {
            "fromName": "瑞达",
            "toName": "沙特阿拉伯",
            "coords": [
              [118.797526, 29.455843],
              [42.937834, 25.728604],
            ],
          },
          {
            "fromName": "瑞达",
            "toName": "韩国",
            "coords": [
              [118.797526, 29.455843],
              [128.006935, 36.526346]
            ],
          }
        ]
      },
    ]
  };
  myChart.setOption(option);

  myChart.dispatchAction({
    type: 'showTip',
    seriesIndex: 2,
    dataIndex: 0
  });
}